<template>
	<div>
		<!-- 头部 -->
		<div class="header">
			<img src="../assets/BlLogo.png" alt="">
			<p><span></span>艺恩专注数据服务13年
			</p>
			<!-- 搜索框 -->
			<el-input placeholder="请输入内容" @input="GetSearch" v-model="value" class="input-with-select" style="border-color: #b9c3d2;">
			</el-input>
			<!-- 下拉 -->
			<div class="header_right">
				<!-- 下拉 -->
				<el-dropdown class="select" placement="bottom" size="mini" :hide-timeout="300">
					<span class="el-dropdown-link">
						艺恩星数-B站<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>艺恩星数-小红书</el-dropdown-item>
						<el-dropdown-item>艺恩星数-代言人</el-dropdown-item>
						<el-dropdown-item>艺恩星数-电影</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<!-- 头像 -->
				<div class="head">
					<span>
						<i class="el-icon-s-custom"></i>
					</span>
					<el-dropdown class="select" placement="bottom" size="mini" :hide-timeout="300">
						<span class="el-dropdown-link">
							星数用户<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>
								<i class="el-icon-place"></i>个人中心
							</el-dropdown-item>
							<el-dropdown-item>
								<i class="el-icon-switch-button"></i>退出
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<!-- 按钮 -->
				<el-button type="primary" round size="mini" style="margin-top: 15px;margin-left: 15px;">免费版本</el-button>
			</div>
			<div class="searce_show" v-if="value.length">
				<h2>
					<p>符合关键字&nbsp;"<span>
							{{value}}
						</span>"&nbsp;的搜索结果如下</p>
					<button><i class="el-icon-close" type="primary"></i></button>
				</h2>
				<div class="searce_content">
					<div class="searce_con1">
						<h1>
							<i class="el-icon-star-on"></i>
							<span>UP主</span>
							<p>共搜索到<span>100</span>+条结果</p>
							<a href="javascript:;">查看更多></a>
						</h1>
						<!-- 内容 -->
						<ul v-loading="loading">
							<li v-for="(item,index) in BloggerList" :key="index">
								<img :src="'/bfs'+item.AvatarUrl.substr(23)" alt="">
								<div>
									<h4>{{item.NickName}}</h4>
									<p>{{item.BloggerPropsName}}<span
											style="display: inline-block;vertical-align: top;padding-top: 1px;">&nbsp;|&nbsp;</span>粉丝：{{parseInt(item.Fans/100)/100}}万
									</p>
								</div>
							</li>
						</ul>
					</div>
					<div class="searce_con2">
						<h1>
							<i class="el-icon-platform-eleme"></i>
							<span>品牌</span>
							<p>共搜索到<span>100</span>+条结果</p>
							<a href="javascript:;">查看更多></a>
						</h1>
						<!-- 内容 -->
						<ul  v-loading="loading">
							<li v-for="(item,index) in BrandList" :key="index">
								<img :src="'/bfs'+item.Logo.substr(23)" alt="" v-if="item.Logo">
								<img src="../assets/bg_img.jpg" alt="" v-else>
								<div>
									<h4>{{item.Name}}</h4>
									<p v-if="item.Intro">简介<span>：</span>{{item.Intro}}</p>
								</div>
							</li>
						</ul>
					</div>
					<div class="searce_con3">
						<h1>
							<i class="el-icon-video-camera-solid"></i>
							<span>UP主</span>
							<p>共搜索到<span>100</span>+条结果</p>
							<a href="javascript:;">查看更多></a>
						</h1>
						<!-- 内容 -->
						<ul>
							<li v-for="(item,index) in VideoList" :key="index"  v-loading="loading">
								<img :src="'/bfs'+item.LogoUrl.substr(23)" alt="" >
								<div>
									<h4>{{item.Title}}</h4>
									<p>
										<i class="el-icon-video-camera-solid"></i>&nbsp;{{parseInt(item.ViewCount/100)/100}}万&nbsp;&nbsp;
										<i class="el-icon-info"></i>&nbsp;{{parseInt(item.LikeCount/100)/100}}万&nbsp;&nbsp;
										<i class="el-icon-star-on"></i>&nbsp;{{parseInt(item.FavoriteCount/100)/100}}万&nbsp;&nbsp;
									</p>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- 内容 -->
		<div class="container">
			<div class="left">
				<el-row class="tac">
					<el-col :span="12">
						<el-menu default-active="2" class="el-menu-vertical-demo">
							<el-submenu index="1">
								<template slot="title">
									<i class="el-icon-search"></i>
									<span>找UP主</span>
								</template>
								<el-menu-item-group>
									<router-link to="/first/search">
										<el-menu-item index="1-1">UP主检索</el-menu-item>
									</router-link>
									<router-link to="/first/rank">
										<el-menu-item index="1-2">UP主排行</el-menu-item>
									</router-link>
									<router-link to="/first/comparison">
										<el-menu-item index="1-3">UP主对比</el-menu-item>
									</router-link>
								</el-menu-item-group>
							</el-submenu>
						</el-menu>
					</el-col>
				</el-row>
				<el-row class="tac">
					<el-col :span="12">
						<el-menu default-active="2" class="el-menu-vertical-demo">
							<el-submenu index="1">
								<template slot="title">
									<i class="el-icon-s-opportunity"></i>
									<span>创意素材</span>
								</template>
								<el-menu-item-group>
									<router-link to="/first/retrieval">
										<el-menu-item index="1-1">视频搜索</el-menu-item>
									</router-link>
									<router-link to="/first/simple">
										<el-menu-item index="1-2">商单视频</el-menu-item>
									</router-link>
									<router-link to="/first/antistop">
										<el-menu-item index="1-3">关键词分析</el-menu-item>
									</router-link>
									<router-link to="/first/intelbras">
										<el-menu-item index="1-4">视频监控</el-menu-item>
									</router-link>
									<router-link to="/first/topic">
										<el-menu-item index="1-5">话题搜索</el-menu-item>
									</router-link>
								</el-menu-item-group>
							</el-submenu>
						</el-menu>
					</el-col>
				</el-row>
				<el-row class="tac">
					<el-col :span="12">
						<el-menu default-active="2" class="el-menu-vertical-demo">
							<el-submenu index="1">
								<template slot="title">
									<i class="el-icon-data-line"></i>
									<span>品牌分析</span>
								</template>
								<el-menu-item-group>
									<router-link to="/first/retrieve">
										<el-menu-item index="1-1">品牌检索</el-menu-item>
									</router-link>
									<router-link to="/first/ranks">
										<el-menu-item index="1-2">品牌排行</el-menu-item>
									</router-link>
									<router-link to="/first/admin">
										<el-menu-item index="1-3">投放管理|结案</el-menu-item>
									</router-link>
								</el-menu-item-group>
							</el-submenu>
						</el-menu>
					</el-col>
				</el-row>
				<el-row class="tac">
					<el-col :span="12">
						<el-menu default-active="2" class="el-menu-vertical-demo">
							<el-submenu index="1">
								<template slot="title">
									<i class="el-icon-star-on"></i>
									<router-link to="/first/favorite"><span>我的收藏</span></router-link>
								</template>
							</el-submenu>
						</el-menu>
					</el-col>
				</el-row>
				<el-row class="tac">
					<el-col :span="12">
						<el-menu default-active="2" class="el-menu-vertical-demo">
							<el-submenu index="1">
								<template slot="title">
									<i class="el-icon-shopping-cart-full"></i>
									<router-link to="/first/renewal"><span>购买续费</span></router-link>
								</template>
							</el-submenu>
						</el-menu>
					</el-col>
				</el-row>
			</div>
			<div class="content_right">
				<div class="content">
					<router-view></router-view>
				</div>
			</div>
		</div>
		<!-- 客服 -->
		<Service></Service>
	</div>
</template>
<script>
	import Service from "@/components/ServiceView.vue"
	import {getSearch} from "@/api/complete.js"
	export default {
		data() {
			return {
				value: '',
				BloggerList:[],//up主
				BrandList:[],//品牌
				VideoList:[],//视频
			}
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			GetSearch(){
				getSearch({
					"keyWord": this.value,
					"r": 0.04212533313814193,
				})
				.then(res=>{
					if(res.data.Code==200){
						// console.log(res.data.Data)
						this.BloggerList=res.data.Data.BloggerList;
						this.BrandList=res.data.Data.BrandList;
						this.VideoList=res.data.Data.VideoList;
					}
				})
				.catch(err=>console.error(err))
			}
		},
		components:{
			Service
		}
	}
</script>
<style scoped>
	/* 搜索框 */
	.searce_show {
		position: absolute;
		top: 60px;
		left: 300px;
		width: 900px;
		min-height: 200px;
		box-shadow: -1px 0px 14px -10px #000;
		background-color: #fff;
	}

	.searce_show h2 {
		height: 58px;
		padding-left: 20px;
		color: #8e8dbc;
		font-size: 14px;
		font-weight: 400;
		border-bottom: 1px solid #ececec;
	}

	.searce_show h2 p {
		line-height: 58px;
		float: left;
	}

	.searce_show h2 button {
		float: right;
		background-color: #fff;
		border: 0;
		width: 58px;
		height: 57px;
	}

	.searce_show .searce_content {
		width: 100%;
	}

	.searce_show .searce_content>div {
		float: left;
		width: 50%;
		padding: 0 20px;
		min-height: 50px;
		margin-bottom: 10px;
	}

	.searce_show .searce_content h1 {
		height: 58px;
		line-height: 50px;
		border-bottom: 1px solid #ececec;
		font-weight: 400;
	}

	.searce_show .searce_content h1 p {
		display: inline-block;
		padding-top: 5px;
		font-size: 14px;
		margin: 0;
		margin-left: 10px;
		vertical-align: middle;
	}

	.searce_show .searce_content h1 i::before {
		font-size: 17px;
		background-color: #fff;
		color: #5730a0;
	}

	.searce_show .searce_con1 h1 i::before {
		font-size: 22px;
	}

	.searce_show .searce_content h1>span {
		display: inline-block;
		margin: 0 5px;
		font-size: 17px;
		font-weight: 600;
		color: #606266;
	}

	.searce_show .searce_content h1>a {
		font-size: 14px;
		color: #2856ff;
		float: right;
		line-height: 58px;
	}

	.searce_show li {
		height: 58px;
		padding: 10px;
		border-bottom: 1px solid #ececec;
	}

	.searce_show li img {
		float: left;
		width: 36px;
		height: 36px;
		border-radius: 36px;
	}

	.searce_show li div {
		float: left;
		margin-left: 10px;
	}

	.searce_show li div h4 {
		font-size: 14px;
		color: #606266;
	}

	.searce_show li div p {
		font-size: 12px;
		color: #787878;
		
	}
	.searce_show .searce_con3 li h4{
		width: 290px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow:ellipsis;
		padding:3px 0;
	}
	.searce_show .searce_con3 li {
		height: 75px;
	}
	.searce_show .searce_con3 li p{
		color: #8798ad;
	}
	.searce_show .searce_con3 li img{
		width: 76px !important;
		height: 48px !important;
		border-radius: 3px !important;
	}

	/*以上是搜索显示框  */
	body {
		background-color: #f2f5f0;
	}

	.container {
		padding-top: 55px;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background-color: #f2f5f0;
		display: flex;
	}

	.container .left {
		flex: 1;
		min-width: 188px;
		max-width: 188px;
		background-color: #ffffff;
	}

	.el-menu-vertical-demo.el-menu {
		border: none;
	}

	.el-col.el-col-12 {
		width: 100%;
	}

	.tac:nth-of-type(4) .el-submenu__icon-arrow.el-icon-arrow-down::before {
		content: '' !important;
	}

	.tac:nth-of-type(5) .el-submenu__icon-arrow.el-icon-arrow-down::before {
		content: '' !important;
	}

	.content_right {
		flex: 9;
		overflow-y: auto;
		padding: 20px;
	}

	.content_right .content {
		/* background-color: #87838e; */
		min-width: 1450px !important;
	}

	/* 头部 */
	.header {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2022;
		width: 100vw;
		min-width: 1900px;
		height: 55px;
		box-shadow: -4px -10px 13px 4px #000;
		background-color: #fff;
	}

	.header>img {
		float: left;
		margin-left: 12px;
		margin-top: 12px;
	}

	.header>p {
		float: left;
		position: relative;
		font-size: 13px;
		color: #87838e;
		line-height: 55px;
		margin-left: 5px;
		padding-left: 5px;
	}

	.header>p span {
		position: absolute;
		display: inline-block;
		width: 1px;
		background-color: #87838e;
		height: 10px;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}

	/* 搜索 */
	.input-with-select {
		float: left;
		width: 330px;
		height: 30px;
		margin-left: 50px;
	}

	.header_right {
		float: right;
		width: 400px;
		height: 55px;
	}

	.header_right>.select {
		float: left;
		margin-top: 15px;
		border: 1px solid #eee;
		padding: 5px 10px;
		font-size: 12px;
	}

	.header_right .head {
		float: left;
		margin-left: 30px;
		padding-top: 15px;
	}

	.header_right .head>span {
		float: left;
		display: inline-block;
		width: 30px;
		height: 30px;
		background-color: #542e99;
		text-align: center;
		line-height: 30px;
		border-radius: 30px;
	}

	.header_right .head .select {
		border: 1px solid #eee;
		font-size: 12px;
		padding: 5px 10px;
		margin-left: 5px;
	}
</style>
<style>
	/* 搜索按钮 */
	.searce_show h2 button .el-icon-close:before {
		font-size: 16px;
		color: #8e8dbc;
	}

	.header .el-input__inner {
		height: 30px;
		margin-top: 12px;
	}

	.header_right .head .el-icon-s-custom:before {
		color: #fff;
	}

	.header_right .el-button--primary {
		background-color: #c8cedb;
		border: 0;
	}

	/* 鼠标经过切换颜色 */
	.container .left .tac.el-row:hover .el-submenu__title {
		color: #5830a0;
	}

	.container .left .tac.el-row:hover .el-submenu__title .el-icon-search::before {
		color: #5830a0;
	}

	.container .left .el-menu-item {
		width: 100%;
		min-width: auto;
	}

	.container .left .el-menu-item:hover {
		color: #5830a0;
	}

	.left div:first-of-type .el-submenu__title .el-icon-search::before {
		color: #5830a0;
	}
</style>
